<template>
  <div>
    <!--  搜索表单  -->
    <div>
      <el-input v-model="name" placeholder="请输入餐厅名称"></el-input>
      <el-input v-model="address" placeholder="请输入餐厅地址"></el-input>
      <el-button type="primary" style="margin-left: 5px;" @click="loadData(1)">查询</el-button>
      <el-button type="success" style="margin-left: 5px;" @click="handleAdd()">新增</el-button>
    </div>
    <el-table :data="tableData" stripe>
      <el-table-column prop="name" label="餐厅名称" width="180"></el-table-column>
      <el-table-column prop="address" label="餐厅地址" width="180"></el-table-column>
      <el-table-column prop="phone" label="餐厅电话" width="180"></el-table-column>
      <el-table-column prop="openinghours" label="营业时间" width="180"></el-table-column>
      <el-table-column prop="rating" label="餐厅评分" width="180"></el-table-column>
      <el-table-column prop="type" label="餐厅类型" width="180"></el-table-column>
      <el-table-column prop="gly" label="管理员" width="180"></el-table-column>
      <!-- 新增 修改 列 -->
      <el-table-column label="修改" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>

      <!-- 新增 设置餐厅管理员 列 -->
      <el-table-column label="设置餐厅管理员" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleSetAdmin(scope.row)">设置管理员</el-button>
        </template>
      </el-table-column>

      <!-- 新增 删除 列 -->
      <el-table-column label="删除" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-left: 2px">
      <el-pagination
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
          @current-change="handlePageChange">
      </el-pagination>

    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      name: '',
      address: '',
      total: 0
    }
  },
  methods: {
    loadData(page = 1) {
      console.log('loadData')
      console.log('page', page)
      this.currentPage = page;
      const url = `http://localhost:8090/restaurants/selectAllRestaurantsNumSize?page=${page}&pageSize=${this.pageSize}`;
      const params = new URLSearchParams({
        name: this.name,
        address: this.address
      });
      console.log('params', params.toString());

      fetch(`${url}&${params.toString()}`)
          .then(response => response.json())
          .then(json => {
            console.log(json);
            this.tableData = json.data;
            this.total = json.total;
          });
    },
    // 删除数据操作
    handleDelete(id) {
      this.$confirm('此操作将永久删除该餐厅信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fetch(`http://localhost:8090/restaurants/deleteById?id=${id}`, {
          method: 'DELETE'
        })
            .then(response => {
              console.log('删除结果:', response);
              if (response.ok) {
                this.$message.success('删除成功');
                this.loadData(); // 刷新列表
              } else {
                this.$message.error('删除失败');
              }
            })
            .catch(error => {
              console.error('删除出错:', error);
              this.$message.error('网络错误');
            });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 跳转到修改页面
    handleEdit(row) {
      console.log('编辑的数据:', row);
      // 跳转到编辑页面，并携带餐厅 ID
      this.$router.push({ path: `/edit-restaurant/${row.id}` });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.loadData(page);
    },
    // 新增 fetchData 方法
    fetchData() {
      this.loadData(this.currentPage); // 使用当前页码重新加载数据
    },
    // 跳转到新增页面
    handleAdd() {
      this.$router.push({ path: '/addrestaurant' });
    },
    // 设置餐厅管理员的数据
    handleSetAdmin(row) {
      console.log('设置餐厅管理员的数据:', row);
      // 示例：跳转到设置管理员页面，并携带餐厅 ID
      this.$router.push({ path: `/set-admin/${row.id}` });
    }

  },
  created() {
    this.loadData();
    this.handleRefresh = () => {
      this.fetchData();
    };
    this.$root.$on('refresh-data', this.handleRefresh);
  },
  beforeDestroy() {
    this.$root.$off('refresh-data', this.handleRefresh);
  }

}
</script>
